.wrapper {
  .table-wrap {
    .table-head,
    .table-tr {
      display: flex;
      border-bottom: 1px solid #ccc;
      &:active {
        background: rgba($color: #000, $alpha: .1)
      }
      .table-th:nth-of-type(1),
      .table-td:nth-of-type(1) {
        text-align: left;
        flex: 2;
      }
      .table-th:nth-of-type(2),
      .table-th:nth-of-type(3),
      .table-th:nth-of-type(4),
      .table-td:nth-of-type(2),
      .table-td:nth-of-type(3),
      .table-td:nth-of-type(4) {
        flex: 1;
      }
      .table-th,
      .table-td {
        text-align: center;
        padding: 10px;
        // text-overflow: ellipsis;
        // overflow: hidden;
        // white-space: nowrap;
        &:not(:last-child) {
          border-right: 1px solid #ccc;
        }
      }
      .table-th {
        font-weight: 600;
      }
    }
  }
  .empty-data {
    padding: 100px 0;
    display: none;
    text-align: center;
    color: #999;
  }
  .show {
    display: block;
  }
}
